<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body{
            overflow: hidden;
        }
        li{
            line-height:30px;
            border-bottom:1px solid #ccc;
        }
    </style>
    
</head>
<body >
    <ol>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
        <li>测试文本</li>
    </ol>
    <div id="bubble" style="position: fixed;right:5px;top:60%;width:70px;height: 70px;background: #74BEFB;border-radius: 6px;text-align: center;line-height: 70px;color: #fff;font-size: 20px;">
        移动
    </div>
    <script>
        /* 浮标拖动动作 */
           
            var drag = document.getElementById('bubble'),
                winWeight = window.innerWidth,
                middleWin = winWeight/2,
                endTouchX = 0,
                x = 0,y=0;
            var deviceWidth = document.documentElement.clientWidth;
			var deviceHeight = document.documentElement.clientHeight;
            drag.addEventListener('touchstart',function(ev){
                window.event? window.event.cancelBubble = true : ev.stopPropagation();
                drag.addEventListener('touchmove', function(ev){
                    
                    window.event? window.event.cancelBubble = true : ev.stopPropagation();
                    var ev = ev.touches[0];
                    var _x= ev.pageX - 35;
					var _y= ev.pageY - 35;
                    if(_x <= 0){
						_x = 0;
					}
					if(_x >= (deviceWidth-70)){
						_x = deviceWidth-70
					}
					if(_y <= 0){
						_y = 0;
					}
					if(_y >= (deviceHeight-70)){
						_y = deviceHeight-70
					}
                    drag.style.top=(_y)+'px';
                    drag.style.left=(_x)+'px';
                    endTouchX = ev.pageX;
                },false)
                drag.addEventListener('touchend', function(ev){   
                    window.event? window.event.cancelBubble = true : ev.stopPropagation();
                    var _x= ev.pageX - 35;
					var _y= ev.pageY - 35;
                    if(_x <= 0){
						_x = 0;
					}
					if(_x >= (deviceWidth-70)){
						_x = deviceWidth-70
					}
					if(_y <= 0){
						_y = 0;
					}
					if(_y >= (deviceHeight-70)){
						_y = deviceHeight-70
					}
                    drag.style.top=(_y)+'px';
                    drag.style.left=(_x)+'px';
                    
                },false)
            },false)
        </script>
</body>
</html>